<template>
	<view class="page-flashSale page">
		<view class="b-header">
			<pageHeader title="活动" :showBack="from=='index'"></pageHeader>
			<!-- <searchHuodong></searchHuodong> -->
		</view>
		<view class="b-content hasFooter">
<!-- 			<view class="pr">
				<image src="../../static/imgs/bg-skill.png" mode="" class="bg-skill"></image>
				<view class="c-fff text-tip pos-c tac">
					<view class="fz46 fw-b mb-10">本场秒杀</view>
					<view class="df-ac fz22">
						<view class="fz24 mr-10">限时快抢</view>
						<view class="time-tag">01</view>:
						<view class="time-tag">01</view>:
						<view class="time-tag">01</view>:
						<view class="time-tag">01</view>
					</view>
				</view>
			</view> -->
			<view class="p-l-30 p-r-30 p-t-20">
			
				<view class="flash-sale-item df mb-40" v-for="item in list" :key="item.id">
					<view class="pro-img-box">
						<image :src="item.thumb" mode="" class="pro-img " style="max-width: 100%;" @click="goRouter('/pages/huodong/detail',{id:item.id})"></image>
						<view class="btn-buy" :class="item.status_key == 'act_end' ? 'bg-gray' : ''" @click="signUp(item)" >
							<text class="">{{item.status_name}}</text>
						</view>
					</view>
					<view class="product pr">
						<view class="fz24 title">{{item.title}}</view>
						<!-- <view class="c-ae fz18 desc">{{datas.desc}}</view> -->
						<view class="c-ae  mr-10 fz24">{{item.date_activity_start}} - {{item.date_activity_end}}</view>
						<view class="">
							
							<!-- <view class="c-333 fw-b mr-10">2021-12-12 28：00：00</view> -->
							<view class="df fz24">
								<view class="c-ae" style="margin-top: 5px;">
				
									{{item.address}}
								</view>
							</view>
						</view>
				
					</view>
				</view>
				
			</view>
			
		</view>
		<pageFooter v-if="!from"></pageFooter>
	</view>
</template>

<script>
	//import tab from '../../components/tab.vue'
	//import huodongItem from '../../components/huodongItem.vue'
	//import searchHuodong from '../../components/searchHuodong.vue'
	export default {
		components: {
			//tab,
			//huodongItem,
			//searchHuodong
		},
		data() {
			return {
				query: {
					//"keyword": this.$route.query.keyword, // 模糊搜索，搜索的字段对应keyWordLikeFields
					"type": '', // 全等于筛选，对应fieldEq
					"page": 0, // 第几页
					"size": 10, // 每页返回个数
					"sort": "desc", // 排序方向
					"order": "id" // 排序字段
				},
				tab:[
					{id:1,name:'本场秒杀'},
					{id:2,name:'即将开始'},
				],
				list:[
					{id:2,img:'../../static/goods/faxian1.png',title:'甄选项目 I 第七代AOPT超光子',desc:'超光子嫩肤M22+修丽可联合治疗全模式/淡斑祛痘'},
					{id:3,img:'../../static/goods/faxian2.png',title:'甄选项目 I 进口除皱专场',desc:'美国进口品牌除皱20单位/单部位除皱/高级审美/抗衰年轻化'},
					{id:4,img:'../../static/goods/faxian3.png',title:'甄选项目 I 第七代AOPT超光子',desc:'超光子嫩肤M22+修丽可联合治疗全模式/淡斑祛痘'},
				],
				from:''
			}
		},
		onLoad(op) {
			this.from = op.from
		},
		created() {
		
			this.init()
		},
		methods: {
			signUp(data){
				console.log(data);
				if(data.status_key == 'sign_ing'){
					uni.navigateTo({
						url:'/pages/huodong/signUp?id='+data.id
					})
				}
			},
			tabClick(data) {
				
			},
			async init() {
				 let res = await this.$api.activityList(this.query).then(res=> {
					 console.log("活动列表")
						console.log(res)
						this.list = res.data.list;
				 }).catch(err=> { console.log(err) }
				 );
			},
		}
	}
</script>

<style lang="scss">
.page-flashSale {
	.bg-skill {
		width: 100%;
		height: 180rpx;
	}
	.text-tip {
		position: absolute;
	}
	.time-tag {
		font-size: 22rpx;
		padding: 0 4rpx;
		background-color: rgba(0,0,0,.4);
	}
}
</style>

<style lang="scss">
.flash-sale-item {
	.pro-img {
		width: 250rpx;
		height: 250rpx;
		border-radius:10rpx;
		margin-right: 30rpx;
	}
	.product {
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.title{
			font-size: 30rpx;
		}
	}
	.btn-buy {
		color: hsla(0,0%,100%,.95);
		background: linear-gradient(225deg, #ff9668, #ff5d72);
		height: 25px;
		line-height: 25px;
		text-align: center;
		font-size: 10px;
		//border-radius: 2px;
		padding: 0px 5px 5px 5px;
		margin-top: -45px;
		position: absolute;
		width: 23%;
		border-radius: 0 25px 25px 0;
	}
	.bg-gray{
		    background: linear-gradient(225deg, #888, #888);
	}
}
</style>